<template>
  <div align="center">
    <el-card class="box-card" >
      <div slot="header" class="clearfix" style="line-height: 40px">
        <span style="float: left">查看库存明细</span>
        <el-button style="float: right;margin-right: 20px " type="success" plain @click="returnto()">返回</el-button>
      </div>
      <div>
        <el-form ref="form" :model="form" label-width="80px" style="float: left">
          <el-form-item label="药品编码" style="float: left">
            <el-input v-model="form.drugId"></el-input>
          </el-form-item>
          <el-form-item label="药品名称" style="float: left">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="收费类型" style="float: left">
            <el-input v-model="form.kind"></el-input>
          </el-form-item>
          <el-form-item label="药品规格" style="float: left">
            <el-input v-model="form.specification"></el-input>
          </el-form-item>
          <el-form-item label="药品剂型" style="float: left">
            <el-input v-model="form.formulation"></el-input>
          </el-form-item>
          <el-form-item label="生产商家" style="float: left">
            <el-input v-model="form.manufacturer"></el-input>
          </el-form-item>
          <el-form-item label="库存数量" style="float: left">
            <el-input v-model="form.repertory"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-table
          :data="druginfo"
          :header-cell-style="{background:'#5ddcf6',color:'#0a0a0d','text-align':'center','line-height': '40px'}"
          style="width: 100%;"
          :cell-style="{'text-align':'center'}">
          <el-table-column
            type="index"
            label="序号"
            width="180">
          </el-table-column>

          <el-table-column
            prop="inventoryNum"
            label="单号"
            width="180">
          </el-table-column>

          <el-table-column
            prop="inventoryDate"
            label="操作时间"
            width="180">
          </el-table-column>

          <el-table-column
            prop="inventoryType"
            label="类型"
            width="180">
          </el-table-column>
          <el-table-column
            prop="inventoryNumber"
            label="数量"
            width="180">
          </el-table-column>
          <el-table-column
            prop="pihao"
            label="批号"
            width="180">
          </el-table-column>

          <el-table-column
          prop="purchasePrice"
          label="采购金额"
          width="180">
        </el-table-column>

          <el-table-column
            prop="retailPrice"
            label="零售金额"
            width="180">
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="10">
          </el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        form: {},
        druginfo:[],
        currentPage4: 4,
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      },
      returnto(){
        this.$router.push("/drugInventory")
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      //分页
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      findAll:function () {
        this.druginfo=[{
          inventoryNum:111,
          inventoryDate:111,
          inventoryType:111,
          inventoryNumber:111,
          pihao:2,
          purchasePrice:1111,
          retailPrice:1111,
        }]
      }
    },
    mounted(){
      this.findAll();
      this.form={
        drugId:1111,
        name:1111,
        kind:1111,
        classify:1111,
        specification:1111,
        formulation:1111,
        invoice:1111,
        permitNo:1111,
        manufacturer:1111,
        isOtc:1111,
        status:1111,
        time:'2019-02-09 10:23:56',
        packingUnit:1111,
        factor:1111,
        units:1111,
        doseFactor:1111,
        doseUnit:1111,
        purchasePrice:1111,
        retailPrice:1111,
        attribute1:1111,
        attribute2:1111,
        repertory:300}
    }
  }
</script>

<style>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 75%;

  }
</style>
